//处理理赔模块
<template>
  <div id="clamis">
    <h1 class="clamis">处理理赔申请</h1>
    <el-table :data="claims" style="width: 100%">
      <el-table-column fixed type="index" align="center"></el-table-column>
      <el-table-column prop="_id" label="理赔编号" width="220px" align="center">
      </el-table-column>
      <el-table-column label="所属订单编号" width="220px" align="center">
        <template slot-scope="scope">
          {{ scope.row.ordersId._id }}
        </template>
      </el-table-column>
      <el-table-column
        prop="applyTime"
        label="申请理赔时间"
        width="180px"
        align="center"
      >
        <template slot-scope="scope">
          {{ toTime(scope.row.applyTime) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="accidentTime"
        label="事故时间"
        width="180px"
        align="center"
      >
      </el-table-column>
      <el-table-column label="理赔状态" width="150px" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state == 1">理赔中</el-tag>
          <el-tag v-else-if="scope.row.state == 2" type="success"
            >理赔成功</el-tag
          >
          <el-tag v-else type="danger">理赔失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="理赔图片" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100px" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="show(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.currentPage + 1"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="理赔详情"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
    >
      <div id="det">
        <ul>
          <li>理赔编号：{{ data._id }}</li>
          <li>所属订单编号：{{ data.ordersId ? data.ordersId._id : "无" }}</li>
          <li>申请理赔时间：{{ toTime(data.applyTime) }}</li>
          <li>事故时间：{{ data.accidentTime }}</li>
          <li>
            理赔状态：
            <el-tag v-if="data.state == 1">理赔中</el-tag>
            <el-tag v-else-if="data.state == 2" type="success">理赔成功</el-tag>
            <el-tag v-else type="danger">理赔失败</el-tag>
          </li>
          <li>理赔图片：</li>
          <li>
            客户编号：{{ data.ordersId?data.ordersId.customersId.customersId:'' }}
          </li>
          <li>
            销售员编号：{{ data.ordersId?data.ordersId.customersId.salesman:''}}
          </li>
        </ul>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          v-if="data.state == 1"
          type="primary"
          @click="comfirm(data._id)"
          >同意</el-button
        >
        <el-button
          v-if="data.state == 1"
          type="warning"
          @click="disagree(data._id)"
          >拒绝</el-button
        >
        <el-button @click="cancel()">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment"; //处理时间插件

import { createNamespacedHelpers } from "vuex";
import apis from "@h/apis.js";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  "salesmansclaims"
);
export default {
  data() {
    return {
      centerDialogVisible: false,
      data: {},
    };
  },
  computed: {
    ...mapState(["claims", "pageData"]),
  },
  methods: {
    ...mapActions(["getSaleClaims"]),
    ...mapMutations(["changePageSize", "changeCurrentPage"]),
    handleSizeChange(val) {
      this.changePageSize(val);
    },
    handleCurrentChange(val) {
      this.changeCurrentPage(val - 1);
    },
    //操作成功提示
    success() {
      this.$message({
        message: "操作成功",
        type: "success",
      });
    },

    //操作失败
    fail() {
      this.$message({
        message: "操作失败",
        type: "warning",
      });
    },

    show(data) {
      this.data = data;
      this.centerDialogVisible = true;
    },

    getState(state) {
      switch (state) {
        case 1:
          return "理赔中";
          break;
        case 2:
          return "理赔成功";
          break;
        case 3:
          return "理赔失败";
          break;
      }
    },

    toTime(str) {
      return moment(str).format("YYYY-MM-DD HH:mm:ss");
    },

    //拒绝
    async disagree(_id) {
      const { data } = await apis.salesmansclaims.updataSaleClaims({
        _id,
        update: { state: 3 },
      });
      if (data.status) {
        this.success();
        this.getSaleClaims();
        this.centerDialogVisible = false;
      } else {
        this.fail();
        this.centerDialogVisible = false;
      }
    },
    // 同意
    async comfirm(_id) {
      const { data } = await apis.salesmansclaims.updataSaleClaims({
        _id,
        update: { state: 2 },
      });
      if (data.status) {
        this.success();
        this.getSaleClaims();
        this.centerDialogVisible = false;
      } else {
        this.fail();
        this.centerDialogVisible = false;
      }
    },

    // 取消
    cancel() {
      this.centerDialogVisible = false;
    },
  },
  watch: {
    "pageData.pageSize"() {
      this.getSaleClaims();
    },
    "pageData.currentPage"() {
      this.getSaleClaims();
    },
  },
  created() {
    this.getSaleClaims();
  },
};
</script>

<style lang='scss' scoped>
#clamis {
  .clamis {
    font-size: 18px;
    font-weight: lighter;
    margin: 10px 0;
  }
  #det {
    ul > li {
      padding: 10px 0;
    }
  }
}
</style>